<template>
	<div>
		<mj-title type="h2" title="标题"></mj-title>
		<div class="page-desc">页面使用标题，提供6种。h1 ~ h6</div>

		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30"></mj-title>
				<mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="center"></mj-title>
				<mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="right"></mj-title>
				<mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="lr">
					<div slot="right">
						<a href="">更多</a>
					</div>
				</mj-title>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
			<pre>
				<code class="language-js line-numbers">
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30">&lt;/mj-title&gt;
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="center">&lt;/mj-title&gt;
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="right">&lt;/mj-title&gt;
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="lr"&gt;
					&lt;div slot="right"&gt;
						&lt;a href="">更多&lt;/a&gt;
					&lt;/div&gt;
				&lt;/mj-title&gt;
				</code>
			</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-divider>标题位置通过<code>align</code>参数改变</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-js line-numbers">
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="center">&lt;/mj-title>
				</code>
			</pre>
		</div>

		<mj-divider>左右布局<code>align="lr"</code></mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-js line-numbers">
				&lt;mj-title title="春风得意马蹄疾一日看尽长安花" type="h1" size="30" align="lr">
				  &lt;div slot="right">
				    &lt;a href="">更多&lt;/a>
				  &lt;/div>
				&lt;/mj-title>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="API"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>标题文字</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>type</td>
					<td>标题默认尺寸，可设置<code>h1 ~ h6</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>size</td>
					<td>自定义标题尺寸，单位px</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>align</td>
					<td>标题align位置，可设置<code>center</code>、<code>right</code>、<code>lr(用于左右布局)</code>，默认居左</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>color</td>
					<td>标题颜色 例：#000</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>fontWeight</td>
					<td>字体粗细</td>
					<td>Numbe/String</td>
					<td>400/normal</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>